<script setup>
import { ref } from 'vue';
import HomePannel from './HomePannel.vue'
import { getGoodsAPI } from '@/api/home'
import GoodItem from './GoodItem.vue'

const goodList = ref([])

const getGoodList = async () => {
  const res = await getGoodsAPI()
  console.log(res);
  goodList.value = res
}

getGoodList()

</script>

<template>
  <div class="product">
    <div class="container">
      <home-pannel v-for="item in goodList" :key="item.id" :title="item.name" class="goods">
        <div class="item-bd">
          <div class="left">
            <img :src="item.picture" alt="">
            <div class="info">
              <p class="saleinfo">{{ item.name }}</p>
              <p>{{ item.saleInfo }}</p>
            </div>
          </div>
          <ul>
            <li v-for="good in item.goods" :key="good.id" >
              <good-item :good="good"></good-item>
            </li>
          </ul>
        </div>
      </home-pannel>
    </div>
  </div>
</template>

<style lang="less" scoped>
.product {
  background-color: #fff;
  .goods {
    height: 725px;
  }
  .item-bd {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    width: 1240px;
      .left {
      position: relative;
      margin-right: 60px;
      img {
        width: 300px;
        height: 610px;
      }
      .info {
        position: absolute;
        left: 0;
        top: 50%;
        background-color: rgba(0, 0, 0, .2);
        height: 66px;
        width: 188px;
        p {
          float: left;
          font-size: 18px;
        }
        .saleinfo {
          background-color: rgba(0, 0, 0, .5);
        }
      }
    }
    ul {
      display: flex;
      flex-wrap: wrap;
    }
  }
}
</style>